Tengo algunos problemas con Vue 3 y Vuex. Estoy tratando de redirigir a los usuarios cuando inician sesión en mi archivo Vuex, pero no funciona como se esperaba. No devuelve ningún error, cambia un enlace, pero no lo redirige a otra página.
Mi acción se ve así;
actions: { async login(commit: any, payload: any ) { const cookie_token = useCookies(); API.post('/login', { email: payload.email.value, password: payload.password.value }) .then((response: any) => { notif.success('Welcome back, ' + response.data.player.name) cookie.set('user', response.data) commit.commit('loginSuccess', response.data) router.push({ name: 'index', }) }).catch((e) => ( console.log(e.message) ) ) } },Y el enrutador obtiene archivos donde se definen las rutas.
Y aquí está mi archivo de enrutador completo:
import { createRouter as createClientRouter, createWebHistory, } from 'vue-router' import * as NProgress from 'nprogress' // import routes from 'pages-generated' import type { RouteRecordRaw } from "vue-router"; // Then we can define our routes const routes: RouteRecordRaw[] = [ // This is a simple route { component: () => import("/@src/pages/index.vue"), name: "index", path: "/", props: true, }, { component: () => import("/@src/pages/auth.vue"), path: "/auth", props: true, children: [ { component: () => import("/@src/pages/auth/login.vue"), name: "auth-login", path: "login-1", props: true, }, { component: () => import("/@src/pages/auth/login.vue"), name: "auth-signup", path: "singup", props: true, }, ], }, { component: () => import("/@src/pages/[...all].vue"), name: "404", path: "/:all(.*)", props: true, }, ]; export function createRouter() { const router = createClientRouter({ history: createWebHistory(), routes, }) /** * Handle NProgress display on-page changes */ router.beforeEach(() => { NProgress.start() }) router.afterEach(() => { NProgress.done() }) return router } export default createRouter()Tenga en cuenta que está funcionando en otros archivos, y puedo ver que el enrutador se activa aquí, pero no cambia una página, solo en vuex no funciona. Si no funciona, ¿por qué no hay error?
Está creando más de una instancia de Vue Router. Debe exportar la misma instancia de router , no una función que crea una nueva instancia cada vez que se llama.
El siguiente código probablemente producirá el resultado deseado:
import { createRouter, createWebHistory, } from 'vue-router' import * as NProgress from 'nprogress' import type { RouteRecordRaw } from "vue-router"; const routes: RouteRecordRaw[] = [ // your routes here... ]; let router; export function useRouter() { if (!router) { router = createRouter({ history: createWebHistory(), routes, }) router.beforeEach(() => { NProgress.start() }) router.afterEach(() => { NProgress.done() }) } return router } Estoy colocando la instancia del router en el ámbito externo, por lo que siempre obtienes la misma instancia cuando llamas a useRouter() .
Consúmelo usando:
import { useRouter } from '../path/to/router' const router = useRouter();